<template>
  <div>
    <div class="mg-content">
      <el-row :gutter="24">
        <el-col :span="8">
          <div style="position:relative">
            <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
              <div class="el-input-group__prepend" tabindex="-1">门店</div>
              <el-input placeholder="请选择门店" v-model="branchName" auto-complete="off" :maxlength="5" size="medium" >
                <el-button slot="append" icon="el-icon-caret-bottom" @click="goChose()"></el-button>
              </el-input>
            </div>
            <div  v-if="isDistricts" style="position: absolute;z-index:999999;background-color: #fff;width:100%;max-height: 30vh;overflow-y: auto;">
              <div style="text-align:left">
                <el-tree
                  id="myPanel"
                  :data="branchTreeData"
                  node-key="value"
                  ref="tree"
                  :default-checked-keys="checkedKey"
                  default-expand-all
                  @node-click="clickNode"
                  @check="checkClick"
                  :props="branchDefaultProps">
                </el-tree>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" >
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">所属类别</div>
            <el-cascader  placeholder="请选择类别" class="el-cascader-margin w-100p"  size="medium"
                          :options="treeData"
                          :show-all-levels="false" v-model="downCategeryId"
                          change-on-select>
            </el-cascader>
          </div>
        </el-col>
        <el-col :span="8"   >
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">预警状态</div>
            <el-select size="medium" v-model="state" filterable placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in yjSate"
                :key="item.key"
                :label="item.name"
                :value="item.key">
              </el-option>
            </el-select>
          </div>
        </el-col>

      </el-row>
      <el-row :gutter="24" style="margin-top: 15px;">
        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">仓库</div>
            <el-select size="medium" v-model="warehouseId" filterable placeholder="请选择仓库" style="width:100%;">
              <el-option
                v-for="item in warehouses"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <el-input size="medium" v-model="input"  @keyup.enter.native="keyDown($event)" placeholder="请输入原料名称" style="width:100%">
            <template slot="prepend">
              <el-button>原料名称</el-button>
            </template>
          </el-input>
        </el-col>

        <el-col :span="8"  style="padding-right: 0px;padding-left: 0px;">
          <el-button size="medium" class="btn-info"  icon="el-icon-search" @click="search(1)">搜索</el-button>
          <el-button size="medium" class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
        </el-col>
      </el-row>

      <div class="title-buttons">
        <el-button  class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">导出&nbsp;</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-table
            v-loading="loading"
            :data="tableData"
            :border="true"
            style="width: 100%">
            <el-table-column
              label="仓库">
              <template  slot-scope="scope">
                <span>{{scope.row.warehouse_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="原料类别">
              <template  slot-scope="scope">
                <span>{{scope.row.category_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="原料编码">
              <template  slot-scope="scope">
                <span v-if="scope.row.no">{{scope.row.no}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="原料名称">
              <template  slot-scope="scope">
                <span v-if="scope.row.name">{{scope.row.name}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="规格型号">
              <template  slot-scope="scope">
                <span >{{scope.row.goods_spec}}</span>
              </template>
            </el-table-column>
            <el-table-column
            label="库存单位">
            <template  slot-scope="scope">
              <span >{{scope.row.unit}}</span>
            </template>
          </el-table-column>
            <el-table-column
              label="库存数">
              <template  slot-scope="scope">
                <span v-if="scope.row.count">{{scope.row.count.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="库存预警">
              <template  slot-scope="scope">
                <span v-if="scope.row.count>=scope.row.min_stock && scope.row.count<=scope.row.max_stock">---</span>
                <span v-if="scope.row.count>scope.row.max_stock">高于最高库存</span>
                <span v-if="scope.row.count<scope.row.min_stock">低于最低库存</span>
              </template>
            </el-table-column>
            <el-table-column
              label="库存金额">
              <template  slot-scope="scope">
                <span v-if="scope.row.amount">{{scope.row.amount.toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <br>
      <!--<div class="block">-->
        <!--<el-row>-->
          <!--<el-col :span="24" class="text-right">-->
            <!--<el-pagination-->
              <!--@size-change="handleSizeChange"-->
              <!--@current-change="handleCurrentChange"-->
              <!--:current-page="currentPage"-->
              <!--:page-sizes="pageSizes"-->
              <!--:page-size="pageSize"-->
              <!--layout="total, sizes, prev, pager, next, jumper"-->
              <!--:total="total">-->
            <!--</el-pagination>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  //注意路径
  export default{
    data(){
      return {
        treeData:[],
        branchTreeData:[],
        checkedKey:[],
        branchName:"",
        branchId:'',
        isDistricts:false,
        branchDefaultProps:{
          children: 'children',
          label: 'label'
        },
        defaultProps: {
          children: 'children',
          label:function(data){
            return "["+data.no+"]"+data.name;
          }
        },
        warehouseId:"",
        downCategeryId: [],
        categoryId:"",
        loading:false,
        tableData: [],
        pageSizes:window.pageSizes,//所有可选择的条数
        pageSize:window.pageSize,//控制一页显示的条数
        total:10,//总条数
        input:"",
        currentPage:1,
        inputValue:"",
        addShow:false,
        activityId:"",
        warehouses:[],
        yjSate:[{name:"高于最高库存",key:"max"},{name:"低于最低库存",key:"min"}],
        state:"",
        merchantId:""

      }
    },
    created(){
      window.this = this;
      this.initData();
    },
    methods: {
      goChose(){
        this.isDistricts=!this.isDistricts;
      },
      clickNode(data,node,val){

        if(!data.iBranch){
          return;
        }
        this.branchName = data.label;
        this.branchId = data.id;
        this.merchantId = data.merchantId;
        this.isDistricts=false;

        //获取门店仓库
        if(this.branchId){
          this.$axios.get("branchstores/branchStocks/getBranchWarehouses?merchantId="+data.merchantId+"&branchId="+data.id).then((data)=>{
            this.warehouses=data.content.warehouses;
            var tree =data.content.categorys;
            this.cateNewLabel(tree);
            this.treeData = tree;
          }).catch(function(err){
          })
        }

      },
      checkClick(data,check){
        if(!data.iBranch){
          return;
        }
        this.branchName = data.label;
        this.branchId = data.id;
        this.isDistricts=false;
      },
      initData(){
        this.currentPage=1;
        this.getData();
      },
      keyDown(ev){
        if(ev.keyCode==13) {
          this.currentPage=1;
          this.inputValue=this.input;
          this.getData();
        }
      },
      cleanSearch(){
        this.currentPage=1;
        this.input="";
        this.warehouseId='';
        this.downCategeryId=[];
        this.state="";
        this.getData();
      },
      search(){
        this.currentPage=1;
        this.inputValue=this.input;
        this.getData();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.getData();
      },
      getData(){
        // this.loading=true;
        var search="";
        var categoryId=""
        if( this.downCategeryId &&  this.downCategeryId.length>0){
          categoryId = this.downCategeryId[this.downCategeryId.length - 1];
          search="categoryId ="+categoryId+"&"+search;
        }
        console.log(this.warehouseId)
        if(this.warehouseId){
          search="warehouseId="+this.warehouseId +"&"+search;
        }
        if(this.input){
          search="keyword="+this.input +"&"+search;
        }
        if(this.state){
          search="flag="+this.state +"&"+search;
        }
        if(this.merchantId){
          search = "merchantId="+this.merchantId+"&"+search;
        }
        this.$axios.get("branchstores/branchStocks?"+search).then((data)=>{
          this.loading=false
          this.tableData=data.content.stockList;
          var districts = data.content.districts;
          this.newLabel(districts);
          this.branchTreeData= districts;
        }).catch(function(err){
        })

      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            if(!newList[i].iBranch){
              newList[i].disabled =true;
            }
            newList[i].label = newList[i].name;
            if (newList[i].children) {
              this.newLabel(newList[i].children)
            }
          }
        }
      },

      cateNewLabel(newList) {
        if(newList){
          for(var i=0;i<newList.length;i++){
            newList[i].label=newList[i].name;
            newList[i].value=newList[i].id+"";
            if(newList[i].children){
              this.cateNewLabel(newList[i].children)
            }
            if(newList[i].children==null || newList[i].children.length==0){
              newList[i].children=null;
            }
          }
        }
      },

      addSuccess(item){
        this.addShow=false;
        this.currentPage=1;
        this.initData();
      },

      addClose(){
        this.addShow=false;
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.getData();
      },
    }
  }
</script>
<style scoped>
</style>
